<template>
    <div class='scroll-list'>
        <ul ref="list">
            <li :style="{height: listItemHeight + 'px'}"></li>
            <li :style="{height: listItemHeight + 'px'}"></li>
            <li v-for="(item, index) in value" :key="item" :style="{height: listItemHeight + 'px'}" :class="{active: index == scrollNum}">{{item | formatItem}}</li>
            <li :style="{height: listItemHeight + 'px'}"></li>
            <li :style="{height: listItemHeight + 'px'}"></li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'app-time-select',
    model: {
        prop: 'selectItem',
        event: 'scrollStop'
    },
    filters: {
        formatItem: function (value) {
            if (value < 10) {
                return '0' + value;
            }
            return value.toString();
        }
    },
    props: {
        listItemHeight: {
            type: Number,
            default: 70
        },
        value: {
            type: Array,
            default: () => []
        },
        selectItem: {
            type: Number,
            default: () => 0
        }
    },
    data () {
        return {
            scrollNum: 0,
            scrollEndTimeOut: null,
            scrollTop: 0
        }
    },
    computed: {
    },
    created () {
        this.scrollTop = (this.selectItem - this.value[0]) * this.listItemHeight;
    },
    mounted () {
        this.$refs['list'].scrollTop = this.scrollTop;
        this.$refs['list'].addEventListener('scroll', this.scrollHandler)
    },
    watch: {
    },
    methods: {
        scrollHandler (event) {
            this.scrollNum = Math.floor((event.target.scrollTop + this.listItemHeight / 2) / this.listItemHeight);
            this.scrollTop = this.scrollNum * this.listItemHeight;
            clearTimeout(this.scrollEndTimeOut);
            this.scrollEndTimeOut = null;
            this.scrollEndTimeOut = setTimeout(() => {
                this.animate(this.scrollTop - this.$refs['list'].scrollTop);
                this.$emit('scrollStop', this.value[this.scrollNum]);
            }, 100);
        },
        animate (target) {
            let step = target > 0 ? 2 : -2;
            requestAnimationFrame(() => {
                let dist = this.$refs['list'].scrollTop - this.scrollTop
                if (dist > -2 && dist < 2) {
                    this.$refs['list'].scrollTop = this.scrollTop
                } else {
                    this.$refs['list'].scrollTop += step;
                    this.animate(target);
                }
            })
        }
    }
}
</script>

<style lang='scss' scoped>
.scroll-list {
    height: 100%;
    padding: 30px 0;
}

ul {
    height: 100%;
    overflow: auto;

    li {
        height: 70px;
        width: 100%;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8b8f97;

        &.active {
            color: #ffffff;
            font-size: 17px;
            font-weight: 500;
        }
    }
}
</style>